<template>
  <div id="container" ref="container"></div>
</template>

<script>
import G6 from '@antv/g6'
import { treeData } from '@/mock/g6.js'
// import { treeData } from '@/mock/g61.js'

export default {
  name: 'TreeGraph',
  mounted () {
    this.initG6()

  },
  methods: {
    initG6 () {
      const getCustomTypeColor = (type) => {
        const colorMap = {
          'profile': '#647FFF',
          'marketingActivity': '#43A2F4',
          'productGroup': '#F5645F',
          'marketingActivity': '#47DEBD',
          'eventInstance': '#9A71FE',
        }
        return colorMap[type] || '#43A2F4'
      }
      G6.registerNode(
        'tree-node',
        {
          drawShape: function drawShape (cfg, group) {
            console.log('cfg', cfg)
            const rect = group.addShape('rect', {
              attrs: {
                fill: '#fff',
                stroke: getCustomTypeColor(cfg.customType),
                x: 0,
                y: 0,
                width: 1,
                height: 1
              },
              name: 'rect-shape',
            })
            const content = cfg.name.replace(/(.{19})/g, '$1\n')
            const text = group.addShape('text', {
              attrs: {
                text: content,
                x: 200,
                y: 200,
                textAlign: 'start',
                textBaseline: 'middle',
                fill: '#666',
              },
              // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
              name: 'text-shape',
            })
            const bbox = text.getBBox()
            const hasChildren = cfg.children && cfg.children.length > 0
            rect.attr({
              x: -bbox.width / 2 - 4,
              y: -bbox.height / 2 - 6,
              width: bbox.width + (hasChildren ? 26 : 12),
              height: bbox.height + 12,
            })
            text.attr({
              x: -bbox.width / 2,
              y: 0
            })
            return rect
          },
        },
        'single-node',
      )

      const container = document.getElementById('container')
      const width = container.scrollWidth
      const height = container.scrollHeight || 500
      const graph = new G6.TreeGraph({
        container: 'container',
        width,
        height,
        modes: {
          default: [
            {
              type: 'collapse-expand',
              onChange: function onChange (item, collapsed) {
                graph.updateItem(item, {
                  collapsed,
                })
                return false
              },
            },
            'drag-canvas',
            // 'zoom-canvas',
          ],
        },
        defaultNode: {
          type: 'tree-node',
          style: {
            stroke: '#FF0000',
          },
          anchorPoints: [
            [0, 0.5],
            [1, 0.5],
          ],
        },
        defaultEdge: {
          type: 'cubic-horizontal',
          style: {
            stroke: '#9A71FE',
            lineWidth: 5,
          },
        },
        layout: {
          type: 'compactBox',
          direction: 'H',
          getId: function getId (d) {
            return d.id
          },
          getHeight: function getHeight () {
            return 1
          },
          getWidth: function getWidth () {
            return 1
          },
          getVGap: function getVGap () {
            return 20
          },
          getHGap: function getHGap () {
            return 80
          },
        },
      })
      const dataToRender = treeData
      G6.Util.traverseTree(dataToRender, function (item, index) {
        item.id = `${item.name}-${index}-${item.id}`
        if (item.type) {
          item.customType = item.type
          delete item.type
        }
      })
      graph.data(dataToRender)
      graph.render()
      graph.fitView()
      if (typeof window !== 'undefined')
        window.onresize = () => {
          if (!graph || graph.get('destroyed')) return
          if (!container || !container.scrollWidth || !container.scrollHeight) return
          graph.changeSize(container.scrollWidth, container.scrollHeight)
        }
    },
  }
};
</script>

<style scoped>
#container {
  width: 100%;
  height: 500px;
  border: 1px solid #ccc;
}
</style>